<template>
  <div class="settings-page">
    <div class="page-header">
      <h2>系统设置</h2>
    </div>

    <div class="settings-container">
      <!-- 收银机配置 -->
      <div class="settings-section">
        <h3>收银机配置</h3>
        <div class="settings-form">
          <div class="form-group">
            <label>收银机名称</label>
            <input v-model="posSettings.name" class="form-input" />
          </div>
          <div class="form-group">
            <label>收银机编号</label>
            <input v-model="posSettings.code" class="form-input" />
          </div>
          <div class="form-group">
            <label>门店地址</label>
            <input v-model="posSettings.address" class="form-input" />
          </div>
          <div class="form-group">
            <label>联系电话</label>
            <input v-model="posSettings.phone" class="form-input" />
          </div>
        </div>
      </div>

      <!-- 打印设置 -->
      <div class="settings-section">
        <h3>打印设置</h3>
        <div class="settings-form">
          <div class="form-group">
            <label>打印机类型</label>
            <select v-model="printSettings.type" class="form-select">
              <option value="thermal">热敏打印机</option>
              <option value="inkjet">喷墨打印机</option>
              <option value="laser">激光打印机</option>
            </select>
          </div>
          <div class="form-group">
            <label>纸张大小</label>
            <select v-model="printSettings.paperSize" class="form-select">
              <option value="80mm">80mm</option>
              <option value="58mm">58mm</option>
              <option value="A4">A4</option>
            </select>
          </div>
          <div class="form-group">
            <label>打印份数</label>
            <input v-model="printSettings.copies" type="number" min="1" max="5" class="form-input" />
          </div>
          <div class="form-group">
            <label class="checkbox-label">
              <input v-model="printSettings.autoPrint" type="checkbox" />
              自动打印小票
            </label>
          </div>
          <div class="form-group">
            <label class="checkbox-label">
              <input v-model="printSettings.printLogo" type="checkbox" />
              打印店铺Logo
            </label>
          </div>
        </div>
      </div>

      <!-- 登录设置 -->
      <div class="settings-section">
        <h3>登录设置</h3>
        <div class="settings-form">
          <div class="form-group">
            <label class="checkbox-label">
              <input v-model="loginSettings.enableCaptcha" type="checkbox" />
              启用登录验证码
            </label>
          </div>
          <div class="form-group">
            <label>验证码长度</label>
            <select v-model="loginSettings.captchaLength" class="form-select">
              <option value="4">4位</option>
              <option value="6">6位</option>
              <option value="8">8位</option>
            </select>
          </div>
          <div class="form-group">
            <label>验证码类型</label>
            <select v-model="loginSettings.captchaType" class="form-select">
              <option value="alphanumeric">字母数字混合</option>
              <option value="numeric">纯数字</option>
              <option value="alphabetic">纯字母</option>
            </select>
          </div>
          <div class="form-group">
            <label class="checkbox-label">
              <input v-model="loginSettings.caseSensitive" type="checkbox" />
              验证码区分大小写
            </label>
          </div>
        </div>
      </div>

      <!-- 支付设置 -->
      <div class="settings-section">
        <h3>支付设置</h3>
        <div class="settings-form">
          <div class="form-group">
            <label>微信支付商户号</label>
            <input v-model="paymentSettings.wechatMerchantId" class="form-input" />
          </div>
          <div class="form-group">
            <label>支付宝商户号</label>
            <input v-model="paymentSettings.alipayMerchantId" class="form-input" />
          </div>
          <div class="form-group">
            <label>银行卡收单机构</label>
            <select v-model="paymentSettings.cardAcquirer" class="form-select">
              <option value="unionpay">银联</option>
              <option value="visa">Visa</option>
              <option value="mastercard">Mastercard</option>
            </select>
          </div>
          <div class="form-group">
            <label class="checkbox-label">
              <input v-model="paymentSettings.enableCash" type="checkbox" />
              启用现金支付
            </label>
          </div>
          <div class="form-group">
            <label class="checkbox-label">
              <input v-model="paymentSettings.enableWechat" type="checkbox" />
              启用微信支付
            </label>
          </div>
          <div class="form-group">
            <label class="checkbox-label">
              <input v-model="paymentSettings.enableAlipay" type="checkbox" />
              启用支付宝
            </label>
          </div>
          <div class="form-group">
            <label class="checkbox-label">
              <input v-model="paymentSettings.enableCard" type="checkbox" />
              启用银行卡
            </label>
          </div>
        </div>
      </div>

      <!-- 权限管理 -->
      <div class="settings-section">
        <h3>权限管理</h3>
        <div class="users-table">
          <table>
            <thead>
              <tr>
                <th>用户名</th>
                <th>角色</th>
                <th>权限</th>
                <th>状态</th>
                <th>操作</th>
              </tr>
            </thead>
            <tbody>
              <tr v-for="user in users" :key="user.id">
                <td>{{ user.username }}</td>
                <td>
                  <span class="role-badge" :class="user.role">
                    {{ getRoleText(user.role) }}
                  </span>
                </td>
                <td>{{ user.permissions.join(', ') }}</td>
                <td>
                  <span class="status-badge" :class="user.status">
                    {{ user.status === 'active' ? '启用' : '禁用' }}
                  </span>
                </td>
                <td class="actions">
                  <button @click="editUser(user)" class="edit-btn">编辑</button>
                  <button @click="toggleUserStatus(user)" class="toggle-btn">
                    {{ user.status === 'active' ? '禁用' : '启用' }}
                  </button>
                </td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>

      <!-- 系统信息 -->
      <div class="settings-section">
        <h3>系统信息</h3>
        <div class="system-info">
          <div class="info-item">
            <span class="info-label">系统版本：</span>
            <span class="info-value">{{ systemInfo.version }}</span>
          </div>
          <div class="info-item">
            <span class="info-label">数据库版本：</span>
            <span class="info-value">{{ systemInfo.dbVersion }}</span>
          </div>
          <div class="info-item">
            <span class="info-label">最后更新：</span>
            <span class="info-value">{{ systemInfo.lastUpdate }}</span>
          </div>
          <div class="info-item">
            <span class="info-label">系统运行时间：</span>
            <span class="info-value">{{ systemInfo.uptime }}</span>
          </div>
        </div>
      </div>

      <!-- 保存按钮 -->
      <div class="save-section">
        <button @click="saveSettings" class="save-btn">保存设置</button>
        <button @click="resetSettings" class="reset-btn">重置设置</button>
      </div>
    </div>

    <!-- 编辑用户弹窗 -->
    <div v-if="showUserModal" class="modal">
      <div class="modal-content">
        <h3>编辑用户</h3>
        <form @submit.prevent="saveUser" class="user-form">
          <div class="form-group">
            <label>用户名</label>
            <input v-model="editingUser.username" required class="form-input" />
          </div>
          <div class="form-group">
            <label>角色</label>
            <select v-model="editingUser.role" required class="form-select">
              <option value="admin">管理员</option>
              <option value="cashier">收银员</option>
              <option value="manager">店长</option>
            </select>
          </div>
          <div class="form-group">
            <label>权限</label>
            <div class="permissions-list">
              <label class="checkbox-label">
                <input v-model="editingUser.permissions" type="checkbox" value="pos" />
                收银操作
              </label>
              <label class="checkbox-label">
                <input v-model="editingUser.permissions" type="checkbox" value="inventory" />
                商品管理
              </label>
              <label class="checkbox-label">
                <input v-model="editingUser.permissions" type="checkbox" value="members" />
                会员管理
              </label>
              <label class="checkbox-label">
                <input v-model="editingUser.permissions" type="checkbox" value="reports" />
                报表查看
              </label>
              <label class="checkbox-label">
                <input v-model="editingUser.permissions" type="checkbox" value="settings" />
                系统设置
              </label>
            </div>
          </div>
          <div class="form-actions">
            <button type="submit" class="save-btn">保存</button>
            <button type="button" @click="showUserModal = false" class="cancel-btn">取消</button>
          </div>
        </form>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { getLoginSettings, saveLoginSettings, resetLoginSettings } from '@/utils/loginSettings'

// 响应式数据
const showUserModal = ref(false)
const editingUser = ref({})

// 收银机设置
const posSettings = ref({
  name: '主收银台',
  code: 'POS001',
  address: '北京市朝阳区某某街道123号',
  phone: '010-12345678'
})

// 打印设置
const printSettings = ref({
  type: 'thermal',
  paperSize: '80mm',
  copies: 1,
  autoPrint: true,
  printLogo: true
})

// 登录设置
const loginSettings = ref({
  enableCaptcha: true,
  captchaLength: 4,
  captchaType: 'alphanumeric',
  caseSensitive: false
})

// 支付设置
const paymentSettings = ref({
  wechatMerchantId: '1234567890',
  alipayMerchantId: '0987654321',
  cardAcquirer: 'unionpay',
  enableCash: true,
  enableWechat: true,
  enableAlipay: true,
  enableCard: true
})

// 用户数据
const users = ref([
  {
    id: 1,
    username: 'admin',
    role: 'admin',
    permissions: ['pos', 'inventory', 'members', 'reports', 'settings'],
    status: 'active'
  },
  {
    id: 2,
    username: 'cashier1',
    role: 'cashier',
    permissions: ['pos'],
    status: 'active'
  },
  {
    id: 3,
    username: 'manager1',
    role: 'manager',
    permissions: ['pos', 'inventory', 'members', 'reports'],
    status: 'active'
  }
])

// 系统信息
const systemInfo = ref({
  version: 'v1.0.0',
  dbVersion: 'MySQL 8.0',
  lastUpdate: '2024-01-15 10:30:00',
  uptime: '15天 8小时 30分钟'
})

// 方法
const getRoleText = (role) => {
  const roles = {
    admin: '管理员',
    cashier: '收银员',
    manager: '店长'
  }
  return roles[role] || role
}

const editUser = (user) => {
  editingUser.value = { ...user }
  showUserModal.value = true
}

const toggleUserStatus = (user) => {
  user.status = user.status === 'active' ? 'inactive' : 'active'
}

const saveUser = () => {
  const index = users.value.findIndex(u => u.id === editingUser.value.id)
  if (index > -1) {
    users.value[index] = { ...editingUser.value }
  }
  showUserModal.value = false
}

const saveSettings = () => {
  // 保存登录设置
  saveLoginSettings(loginSettings.value)
  
  // 保存其他设置
  localStorage.setItem('posSettings', JSON.stringify(posSettings.value))
  localStorage.setItem('printSettings', JSON.stringify(printSettings.value))
  localStorage.setItem('paymentSettings', JSON.stringify(paymentSettings.value))
  
  alert('设置已保存！')
}

// 加载保存的设置
const loadSettings = () => {
  try {
    // 加载登录设置
    loginSettings.value = getLoginSettings()
    
    // 加载其他设置
    const savedPosSettings = localStorage.getItem('posSettings')
    if (savedPosSettings) {
      posSettings.value = { ...posSettings.value, ...JSON.parse(savedPosSettings) }
    }
    
    const savedPrintSettings = localStorage.getItem('printSettings')
    if (savedPrintSettings) {
      printSettings.value = { ...printSettings.value, ...JSON.parse(savedPrintSettings) }
    }
    
    const savedPaymentSettings = localStorage.getItem('paymentSettings')
    if (savedPaymentSettings) {
      paymentSettings.value = { ...paymentSettings.value, ...JSON.parse(savedPaymentSettings) }
    }
  } catch (error) {
    console.error('加载设置失败:', error)
  }
}

const resetSettings = () => {
  if (confirm('确定要重置所有设置吗？')) {
    // 重置登录设置
    resetLoginSettings()
    loginSettings.value = {
      enableCaptcha: true,
      captchaLength: 4,
      captchaType: 'alphanumeric',
      caseSensitive: false
    }
    
    // 重置其他设置
    posSettings.value = {
      name: '主收银台',
      code: 'POS001',
      address: '北京市朝阳区某某街道123号',
      phone: '010-12345678'
    }
    
    printSettings.value = {
      type: 'thermal',
      paperSize: '80mm',
      copies: 1,
      autoPrint: true,
      printLogo: true
    }
    
    paymentSettings.value = {
      wechatMerchantId: '1234567890',
      alipayMerchantId: '0987654321',
      cardAcquirer: 'unionpay',
      enableCash: true,
      enableWechat: true,
      enableAlipay: true,
      enableCard: true
    }
    
    // 清除其他本地存储
    localStorage.removeItem('posSettings')
    localStorage.removeItem('printSettings')
    localStorage.removeItem('paymentSettings')
    
    alert('设置已重置！')
  }
}

// 组件挂载时加载设置
onMounted(() => {
  loadSettings()
})
</script>

<style scoped>
.settings-page {
  padding: 20px;
  background: #f5f7fa;
  min-height: 100vh;
}

.page-header {
  margin-bottom: 30px;
}

.page-header h2 {
  margin: 0;
  font-size: 24px;
  color: #303133;
}

.settings-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
  gap: 20px;
}

.settings-section {
  background: white;
  border-radius: 12px;
  padding: 24px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.settings-section h3 {
  margin: 0 0 20px 0;
  font-size: 18px;
  color: #303133;
  border-bottom: 2px solid #f0f0f0;
  padding-bottom: 12px;
}

.settings-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.form-group label {
  font-size: 14px;
  font-weight: 600;
  color: #303133;
}

.form-input, .form-select {
  padding: 12px 16px;
  border: 2px solid #e4e7ed;
  border-radius: 8px;
  font-size: 16px;
  outline: none;
  transition: border-color 0.3s;
}

.form-input:focus, .form-select:focus {
  border-color: #409eff;
}

.checkbox-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: #303133;
  cursor: pointer;
}

.checkbox-label input[type="checkbox"] {
  width: 16px;
  height: 16px;
}

/* 用户表格 */
.users-table {
  overflow-x: auto;
}

table {
  width: 100%;
  border-collapse: collapse;
}

th, td {
  padding: 12px;
  text-align: left;
  border-bottom: 1px solid #f0f0f0;
}

th {
  background: #fafafa;
  font-weight: 600;
  color: #303133;
  font-size: 14px;
}

.role-badge {
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 600;
  color: white;
}

.role-badge.admin {
  background: #f56c6c;
}

.role-badge.cashier {
  background: #409eff;
}

.role-badge.manager {
  background: #67c23a;
}

.status-badge {
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 600;
  color: white;
}

.status-badge.active {
  background: #67c23a;
}

.status-badge.inactive {
  background: #f56c6c;
}

.actions {
  display: flex;
  gap: 8px;
}

.edit-btn, .toggle-btn {
  padding: 6px 12px;
  border: none;
  border-radius: 4px;
  font-size: 12px;
  cursor: pointer;
  transition: background-color 0.3s;
}

.edit-btn {
  background: #409eff;
  color: white;
}

.toggle-btn {
  background: #e6a23c;
  color: white;
}

.edit-btn:hover {
  background: #337ecc;
}

.toggle-btn:hover {
  background: #d4941f;
}

/* 系统信息 */
.system-info {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.info-item {
  display: flex;
  justify-content: space-between;
  padding: 8px 0;
  border-bottom: 1px solid #f0f0f0;
}

.info-item:last-child {
  border-bottom: none;
}

.info-label {
  font-size: 14px;
  color: #606266;
}

.info-value {
  font-size: 14px;
  color: #303133;
  font-weight: 600;
}

/* 权限列表 */
.permissions-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.permissions-list .checkbox-label {
  font-size: 14px;
}

/* 保存按钮 */
.save-section {
  grid-column: 1 / -1;
  display: flex;
  gap: 16px;
  justify-content: center;
  margin-top: 20px;
}

.save-btn, .reset-btn {
  padding: 12px 32px;
  border: none;
  border-radius: 8px;
  font-size: 16px;
  cursor: pointer;
  transition: background-color 0.3s;
}

.save-btn {
  background: #409eff;
  color: white;
}

.reset-btn {
  background: #f56c6c;
  color: white;
}

.save-btn:hover {
  background: #337ecc;
}

.reset-btn:hover {
  background: #e45656;
}

/* 弹窗样式 */
.modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.modal-content {
  background: white;
  border-radius: 12px;
  padding: 30px;
  min-width: 500px;
  max-width: 600px;
  max-height: 80vh;
  overflow-y: auto;
}

.modal-content h3 {
  margin: 0 0 24px 0;
  font-size: 20px;
  color: #303133;
}

.user-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.form-actions {
  display: flex;
  gap: 12px;
  margin-top: 24px;
}

.form-actions .save-btn, .form-actions .cancel-btn {
  flex: 1;
  padding: 12px 24px;
  border: none;
  border-radius: 8px;
  font-size: 16px;
  cursor: pointer;
}

.form-actions .cancel-btn {
  background: #f56c6c;
  color: white;
}

/* 响应式设计 */
@media (max-width: 1200px) {
  .settings-container {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  .settings-page {
    padding: 15px;
  }
  
  .settings-container {
    grid-template-columns: 1fr;
  }
  
  .users-table {
    overflow-x: auto;
  }
  
  .modal-content {
    min-width: 90%;
    margin: 20px;
  }
  
  .save-section {
    flex-direction: column;
  }
  
  .actions {
    flex-direction: column;
  }
}
</style> 